<template>
  <div>
    <el-descriptions class="physicalCheck" :column="2" border :labelStyle='{width:"220px"}' :contentStyle='{width:"259px"}'>
      <el-descriptions-item>
        <template slot="label">{{$t('接口名')}}</template>
        <div>{{form.strPhysicsName?form.strPhysicsName:form.strBridgeName}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('别名')}}</template>
        <div>{{form.cDevOtherName}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="[0,1,2].includes(form.enPortMode)">
        <template slot="label">{{$t('自协商开关')}}</template>
        <div v-if="form.bNegotiateFlag==='on'">{{$t('开启')}}</div>
        <div v-if="form.bNegotiateFlag==='off'">{{$t('关闭')}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="[0,1,2].includes(form.enPortMode)">
        <template slot="label">{{$t('工作方式')}}</template>
        <div v-if="form.bDuplexFlag==='full'">{{$t('全双工')}}</div>
        <div v-if="form.bDuplexFlag==='half'">{{$t('半双工')}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('模式')}}</template>
        <div v-if="form.enPortMode=== 0">{{$t('路由模式')}}</div>
        <div v-if="form.enPortMode=== 1">{{$t('透明模式')}}</div>
        <div v-if="form.enPortMode=== 3">{{$t('虚拟线模式')}}</div>
        <div v-if="form.enPortMode=== 2">{{$t('聚合模式')}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('收包字节数')}}</template>
        <div>{{form.llRX_b}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('发包字节数')}}</template>
        <div>{{form.llTX_b}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 1">
        <template slot="label">{{$t('链路类型')}}</template>
        <div v-if="form.PHYSICS_PORT_TYPE=== 0">access</div>
        <div v-if="form.PHYSICS_PORT_TYPE=== 1">trunk</div>
        <div v-if="form.PHYSICS_PORT_TYPE=== 2">hybrid</div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">{{$t('速率')}}</template>
        <div>{{form.bandwidth}}M</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('链路状态')}}</template>
        <div>{{form.bLinkStatus === 0 ? 'down':'up'}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="[3].includes(form.enPortMode)">
        <template slot="label">{{$t('对端接口')}}</template>
        <div>{{form.iTransSelectedPort}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="[3].includes(form.enPortMode)">
        <template slot="label">{{$t('数据允许方向')}}</template>
        <div>
          <div v-if="form.iTransType=== 1">{{$t('双向传输')}}</div>
          <div v-if="form.iTransType=== 2" style="float:left;width:200px;">{{$t('单向传输')}}</div>
          <div v-if="form.iTransType === 2" style="float:left;">
            <span v-if="form.iTransDirecType=== 1">{{$t('本接口作为入接口')}}</span>
            <span v-if="form.iTransDirecType=== 2">{{$t('本接口作为出接口')}}</span>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 1 && form.PHYSICS_PORT_TYPE === 1">
        <template slot="label">Default VlanId</template>
        <div>{{form.iVlanId}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 2">
        <template slot="label">{{$t('聚合ID')}}</template>
        <div>{{form.BondId}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 0">
        <template slot="label">{{$t('IPv4网关(策略路由使用)')}}</template>
        <div>{{form.cPortIpv4Gateway}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 0">
        <template slot="label">{{$t('IPv6网关(策略路由使用)')}}</template>
        <div>{{form.cPortIpv6Gateway}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 0">
        <template slot="label">{{$t('出方向带宽(策略路由使用)')}}</template>
        <div>{{form.iOutbandwidth}}{{form.OutbandwidthUnit}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 1 && form.PHYSICS_PORT_TYPE === 0">
        <template slot="label">VlanId</template>
        <div>{{form.iVlanId}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode === 1 && form.PHYSICS_PORT_TYPE === 1">
        <template slot="label">Trunk VlanId</template>
        <div>{{form.iAllowed}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="[0,1,2].includes(form.enPortMode)">
        <template slot="label">{{$t('状态')}}</template>
        <div v-if="form.bPortStatus=== 'down'">{{$t('关闭')}}</div>
        <div v-if="form.bPortStatus=== 'up'">{{$t('打开')}}</div>
      </el-descriptions-item>

    </el-descriptions>

    <div v-if="form.enPortMode === 0" style="margin-top:20px;display: inline-flex;align-items: flex-start;justify-content: space-around;width: 100%;">
      <el-table size='mini' :data="form.ipv4" stripe border style="width:470px;margin-right:20px;">
        <el-table-column prop='cPortIpv4' label="IPv4">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortIpv4" :content="scope.row.cPortIpv4" class="wid190" :refName="scope.row.cPortIpv4">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop='cPortNetmask' :label="$t('子网掩码')">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortNetmask" :content="scope.row.cPortNetmask" class="wid190" :refName="scope.row.cPortNetmask">
            </tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-table size='mini' :data="form.ipv6" stripe border style="width:470px;">
        <el-table-column prop='cPortIpv6' label="IPv6">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortIpv6" :content="scope.row.cPortIpv6" class="wid190" :refName="scope.row.cPortIpv6">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop='cDevIpv6Prefix' :label="$t('前缀')">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cDevIpv6Prefix" :content="scope.row.cDevIpv6Prefix" class="wid190" :refName="scope.row.cDevIpv6Prefix">
            </tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  props: [
    'dialogFormVisible',
    'type_info',
    'edit_form'
  ],
  name: 'PhysicalEdit',
  data () {
    var validateName = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入对象名称')))
      } else {
        callback()
      }
    }
    var add_ipv4 = (rule, value, callback) => {
      if (!String(value).trim()) {
        return callback(new Error(this.$t('IP不能为空')))
      }
      if (!this.isValidIP(value)) {
        callback(new Error(this.$t('请输入正确的ip地址')))
      } else {
        callback()
      }
    }
    var mask = (rule, value, callback) => {
      if (!String(value).trim()) {
        return callback(new Error(this.$t('子网掩码不能为空')))
      }
      if (!this.isValidMask(value)) {
        callback(new Error(this.$t('请输入正确的子网掩码')))
      } else {
        callback()
      }
    }
    var add_ipv6 = (rule, value, callback) => {
      if (!String(value).trim()) {
        return callback(new Error(this.$t('IP不能为空')))
      }
      if (!this.isValidIPv6(value)) {
        callback(new Error(this.$t('请输入正确的ip地址')))
      } else {
        callback()
      }
    }
    return {
      old_name: {},
      old_desc: '',
      form: {
        BondId: '',
        InBandwidthUnit: '',
        InOverloadUnit: '',
        OutOverloadUnit: '',
        OutbandwidthUnit: '',
        bDuplexFlag: '',
        bDuplexFlagState: '',
        bLinkStatus: 0,
        bNegotiateFlag: '',
        bPortStatus: '',
        bandwidth: 0,
        bandwidthState: '',
        cDevOtherName: '',
        cMAC: '',
        cPortIpv4Gateway: '',
        cPortIpv6Gateway: '',
        ePortOrlPort: '',
        enPortMode: 0,
        enPortType: 0,
        force_autoneg: false,
        iMtu: 0,
        iOutbandwidth: 0,
        ipv4: [],
        ipv6: [],
        speed_list: [],
        strPhysicsName: '',
        iTransSelectedPort: '',
        iTransType: 1,
        iTransDirecType: 1
      },
      rules: {
        strPhysicsName: [{ required: false, validator: validateName, trigger: 'blur' }]
      },
      add_rules: {
        ipv4: [
          { validator: add_ipv4, trigger: 'blur' }
        ],
        mask: [
          { validator: mask, trigger: 'blur' }
        ],
        ipv6: [
          { validator: add_ipv6, trigger: 'blur' }
        ],
        ex_len: [
          { required: true, message: this.$t('前缀长度不能为空') },
          { type: 'number', message: this.$t('前缀长度必须为数字值') }
        ]
      },
      add_ipv4_form: {},
      add_ipv6_form: {},
      formLabelWidth: '40%',
      formLabelWidthHalf: '20%',
      dialogAddrFormVisible: false,
      labelPosition: 'left',
      activeName: 'ipv4',
      loading: ''
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        if (this.type_info === '编辑') {
          this.form = val
          this.old_name = val.name
          this.old_desc = val.desc
        } else {
          this.form = val
        }
      },
      immediate: true
    },
    'dialogAddrFormVisible': {
      handler (val) {
        if (val === false) {
          this.add_ipv4_form = {}
          this.add_ipv6_form = {}
          if (this.$refs['add_ipv4_form'] !== undefined) {
            this.$refs['add_ipv4_form'].resetFields()
          }
          if (this.$refs['add_ipv6_form'] !== undefined) {
            this.$refs['add_ipv6_form'].resetFields()
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 发送form表单数据到父组件
    send_form () {
      let childForm = {}
      childForm = this.form
      if (!childForm.name) {
        this.$messages.error(this.$t('请输入名称'))
        return
      }
      if (this.type_info === '编辑') {
        childForm.old_name = this.old_name
      }
      this.$emit('childForm', childForm)
    },
    updateView (e) {
      this.$forceUpdate()
    },
    add_addr () {
      this.dialogAddrFormVisible = true
    },
    backParent () {
      this.$emit('quxiao', false)
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleClick (tab, event) {
      this.loading = tab.name
    },
    isValidIP (ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip)
    },
    isValidMask (mask) {
      let reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(255|254|252|248|240|224|192|128|0)$/
      return reg.test(mask)
    },
    isValidIPv6 (ip) {
      let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      // let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?\s*$/
      return reg.test(ip)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let new_ipv4 = {}
          new_ipv4.cPortIpv4 = this.add_ipv4_form.ipv4
          new_ipv4.cPortNetmask = this.add_ipv4_form.mask
          this.form.ipv4.push(new_ipv4)
          this.dialogAddrFormVisible = false
        } else {
          return false
        }
      })
    },
    submitForm_ipv6 (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let new_ipv6 = {}
          new_ipv6.cPortIpv6 = this.add_ipv6_form.ipv6
          new_ipv6.cDevIpv6Prefix = this.add_ipv6_form.ex_len
          this.form.ipv6.push(new_ipv6)
          this.dialogAddrFormVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.physicalForm {
  .el-form-item {
    border: 1px solid #eee;
    padding: 10px 20px;
    margin: 0;
    margin-left: -1px;
    margin-top: -1px;
  }
}
.tools_box {
  text-align: left;
}
.circle {
  padding: 5px;
}
.warning_span {
  margin-left: 3%;
  color: red;
}
</style>
